<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产: {{ house }}</h4>
		<button @click="changeToy">修改child1的玩具</button>
		<button @click="changeComputer">修改child2的电脑</button>
		<button @click="changeAllChild($refs)">增加所有子组件的book数量</button>
		<Child1 ref="c1" />
		<Child2 ref="c2" />
	</div>
</template>
<!-- $refs, 父传子; $parent, 子传父 -->

<script setup lang="ts" name="Father">
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import { reactive, ref } from 'vue';
let c1 = ref()
let c2 = ref()
let house = ref(4)

function changeToy() {
	c1.value.toy = '玩具汽车'
}
function changeComputer() {
	c2.value.computer = '联想'
}
function changeAllChild(refs: { [key: string]: any }) {
	for (let key in refs) {
		refs[key].book += 1
	}
}
defineExpose({ house })
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-bottom: 10px;
	margin-left: 10px;
}
</style>
